<script setup>
import { computed, ref } from "vue";
import { useStore } from "vuex";
import { userRoleList } from "@/utils/user-role";
import { updatePass } from "@/api/user";
import { message } from "ant-design-vue";

const store = useStore();

const formState = ref({
  password: "",
  oldPassword: "",
});
const loginUser = computed(() => store.state.loginUser);
const handleChangePass = async () => {
  if (!formState.value.oldPassword || !formState.value.password) {
    message.error("请输入");
    return;
  }

  let { data } = await updatePass(formState.value);
  if (data.code != 200) {
    message.error(data.message);
    return;
  }
  message.success(data.message);
  formState.value.oldPassword = "";
  formState.value.password = "";
};
</script>

<template>
  <page-header-wrapper>
    <template #pageHeader>
      <a-page-header title="个人信息" />
    </template>
    <a-card title="快捷操作">
      <a-descriptions title="User Info" bordered :column="1">
        <a-descriptions-item label="用户名">{{ loginUser.username }}</a-descriptions-item>
        <a-descriptions-item label="邮箱">{{ loginUser.email }}</a-descriptions-item>
        <a-descriptions-item label="玩家名">{{ loginUser.playerName }}</a-descriptions-item>
        <a-descriptions-item label="注册IP">{{ loginUser.regIp }}</a-descriptions-item>
        <a-descriptions-item label="注册时间">{{ loginUser.regTime }}</a-descriptions-item>
        <a-descriptions-item label="用户权限">{{ userRoleList[loginUser.userRole] }}</a-descriptions-item>
        <a-descriptions-item label="原密码">
          <a-input v-model:value="formState.oldPassword" placeholder="请输入原密码" />
        </a-descriptions-item>
        <a-descriptions-item label="新密码">
          <a-input v-model:value="formState.password" placeholder="请输入新密码" />
        </a-descriptions-item>
        <a-descriptions-item label="操作">
          <a-button @click="handleChangePass">修改密码</a-button>
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
  </page-header-wrapper>
</template>
